<template>
  <div>
    <!-- Main content -->
    <section class='content'>
      <div class='row'>
        <div class='col-md-12'>
          <div class='box box-solid'>
            <button class='btn btn-info'>衣布到位</button>
            <button class='btn btn-default'>定制宝</button>
            <button class='btn btn-success' style='float:right' @click='display_time'>时间段选择</button>
          </div>
        </div>
      </div>
      <div class='row' v-show='vshow'>
        <div class='col-md-12'>
          <div class='margin-bottom' style='text-align: right;'>
            <span>起始：</span><input class='datepicker start' data-date-format='yyyy-mm-dd' style='margin-right: 50px;'></input>
            <span>终止：</span><input class='datepicker end' data-date-format='yyyy-mm-dd'></input>
          </div>
        </div>
      </div>
      <div class='row'>
        <div class='col-xs-12'>
          <div class='box'>
            <div class='box-header periodBtn'>
              <button class='btn btn-info' @click='daily'>日</button>
              <button class='btn btn-default' @click='monthly'>月</button>
              <button class='btn btn-default' @click='yearly'>年</button>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>日期</th>
                  <th>0~999（占比）</th>
                  <th>1000~4999（占比）</th>
                  <th>5000~19999（占比）</th>
                  <th>2000~49999（占比）</th>
                  <th>50000+（占比）</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
  </div>
</template>
<script>
  import $ from 'jquery'
  import 'datatables.net'
  import 'datatables.net-bs'
  import 'bootstrap-datepicker'
  import config from '../../../config'

  export default {
    name: 'order_pay',
    data: function () {
      return {
        vshow: false,
        vshow1: false,
        table: null
      }
    },
    methods: {
      daily: function () {
        $('.periodBtn button').eq(0).removeClass('btn-default').addClass('btn-info').siblings()
          .removeClass('btn-info').addClass('btn-default')
        this.query()
      },
      monthly: function () {
        $('.periodBtn button').eq(1).removeClass('btn-default').addClass('btn-info').siblings()
          .removeClass('btn-info').addClass('btn-default')
        this.query()
      },
      yearly: function () {
        $('.periodBtn button').eq(2).removeClass('btn-default').addClass('btn-info').siblings()
          .removeClass('btn-info').addClass('btn-default')
        this.query()
      },
      query: function () {
        var time = {}
        if ($('input.start').val() === '' && $('input.start').val() === '') {
          time = null
        } else {
          time.start = $('input.start').val()
          time.end = $('input.end').val()
        }
        var sel = $('.periodBtn .btn-info').html()
        var period = '1d'
        if (sel === '月') {
          period = '1M'
        } else if (sel === '年') {
          period = '1y'
        }
        this.getdata(time, period)
      },
      display_time: function () {
        this.vshow = !this.vshow
      },
      getdata: function (time, period) {
        var $this0 = this
        var params = {}
        if (time != null) {
          params.start = time.start
          params.end = time.end
        }
        if (period != null) {
          params.period = period
        }
        $.ajax({
          type: 'POST',
          url: config.serverURI + '/demo/order/statistics',
          data: JSON.stringify(params),
          'headers': {
            'content-type': 'application/json'
          },
          dataType: 'json',
          success: function (data) {
            $this0.table.clear()
            $.each(data, function (idx, item) {
              $this0.table.row.add([idx, item.c1 + '(' + item.p1 + ')', item.c2 + '(' + item.p2 + ')', item.c3 + '(' + item.p3 + ')', item.c4 + '(' + item.p4 + ')', item.c5 + '(' + item.p5 + ')', item.c6 + '(' + item.p6 + ')'])
            })
            $this0.table.columns.adjust().draw()
          }
        })
      }
    },
    mounted () {
      var $this0 = this
      this.$nextTick(() => {
        $.fn.datepicker.dates['zh-CN'] = {
          days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
          daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          daysMin: ['日', '一', '二', '三', '四', '五', '六', '日'],
          months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          today: '今日',
          format: 'yyyy年mm月dd日',
          weekStart: 1
        }

        $('.datepicker').datepicker({
          language: 'zh-CN',
          showOnFocus: true
        }).on('changeDate', function () {
          $this0.query()
        })

        $.ajax({
          type: 'GET',
          url: config.serverURI + '/demo/order/times',
          data: '',
          'headers': {
            'content-type': 'application/json'
          },
          dataType: 'json',
          success: function (data) {
            $('input.start').datepicker('update', data.start)
            $('input.end').datepicker('update', data.end)
          }
        })

        $this0.query()

        $this0.table = $('#example').DataTable({
          'paging': true,
          'lengthChange': false,
          'searching': false,
          'ordering': false,
          'info': true,
          'autoWidth': true
        })
      })
    }
  }
</script>

<style>
@import url('/static/plugins/datatables/dataTables.bootstrap.css');

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  font-family: 'FontAwesome';
}

table.dataTable thead .sorting:after {
  content: '\f0dc';
}

table.dataTable thead .sorting_asc:after {
  content: '\f0dd';
}

table.dataTable thead .sorting_desc:after {
  content: '\f0de';
}
</style>
